<template>
	<view class="kui-radio kui-flex kui-items-center" :class="[state.positionClass]" :id="state.id" :style="rootStyle" @click="onClick">
		<view class="kui-radio_icon">
			<kui-animation name="fade-in" :duration="0.2" runing v-if="state.checked">
				<kui-icons :size="iconSize" :color="state.icon.activeColor" :type="activeIcon"></kui-icons>
			</kui-animation>
			<kui-icons :size="iconSize" :color="state.icon.inactiveColor" :type="inactiveIcon" v-else></kui-icons>
		</view>
		<view class="kui-radio_label" :class="[labelState.position]" :style="labelStyle">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		reactive,
		defineComponent,
		getCurrentInstance,
		inject,
		onMounted,
		CSSProperties,
		computed,
		watch
	} from 'vue';
	
	import RadioProps from './props';
	
	const name = 'kui-radio';
	
	export default defineComponent({
		name,
		props: RadioProps,
		setup(props) {
			const {
				proxy
			}: any = getCurrentInstance();
			const theme = proxy.$theme;
			
			// 随机生成元素ID
			const elId = `kUI_${Math.ceil(new Date().getTime() * 10e5).toString(36)}`;
			
			const parent = inject('radio-group');
			if (!parent) return;
			
			const state = reactive({
				checked: props.checked,
				disabled: props.disabled,
				marginBottom: '',
				marginRight: '',
				id: elId,
				value: props.value,
				positionClass: '',
				mode: props.mode,
				icon: {
					activeColor: '',
					inactiveColor: ''
				}
			});
			
			const labelState = reactive({
				position: `${name}_label-right`
			});
			
			const rootStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				if (state.disabled) {
					style.opacity = 0.4;
				}
				
				style.marginBottom = state.marginBottom;
				style.marginRight = state.marginRight;
				
				return style;
			});
			
			const labelStyle = computed(() => {
				const style: CSSProperties = reactive({});
				
				style.color = theme.colors[state.mode]['grey'][9];
				
				return style;
			})
			
			const onClick = () => {
				if (!state.checked && !state.disabled) {
					state.checked = true;
					parent.onChange(state);
				}
			}
			
			const isDark = state.mode === 'dark';
			const activeColorMap = theme.colors[state.mode][props.activeColor] ?? uni.kviewUIColor.generate(props.activeColor, {dark: isDark, list: true});
			const inactiveColorMap = theme.colors[state.mode][props.inactiveColor] ?? uni.kviewUIColor.generate(props.inactiveColor, {dark: isDark, list: true});
			
			onMounted(() => {				
				state.icon.activeColor = activeColorMap[5];
				state.icon.inactiveColor = props.inactiveColor === 'grey' ? inactiveColorMap[2] : inactiveColorMap[5];
				// 判断有无父元素实例
				if (parent && parent.childrens.indexOf(state) === -1) {
					parent.childrens.push(state);
					
					// 判断parent的label方向
					if (parent.labelPosition === 'left') {
						state.positionClass = 'kui-flex-row-reverse';
					}
					labelState.position = `${name}_label-${parent.labelPosition}`;
					
					if (parent.direction === 'row') {
						labelState.position = `${labelState.position}-row`;
					}
				}
			});
			
			watch(
				() => [state.marginBottom],
				(newVal) =>  {
					if (newVal[0]) {
						state.marginBottom = newVal[0];
					}
				}
			);
			
			uni.$on("changeMode", (e) => {
				state.mode = e;
				// 暗黑模式图标默认未激活颜色单独处理
				if (state.mode === 'dark' && props.inactiveColor === 'grey') {
					state.icon.inactiveColor = inactiveColorMap[4];
				}
				if (state.mode === 'light') {
					state.icon.inactiveColor = props.inactiveColor === 'grey' ? inactiveColorMap[2] : inactiveColorMap[5];
				}
			});
			
			return {
				theme,
				state,
				labelState,
				labelStyle,
				onClick,
				rootStyle
			}
		}
	});
</script>

<style lang="less">
	.kui-radio {
		&_icon {
			transition-duration: 0.3s;
			transition-property: color, border-color, background-color;
		}
		&_label {
			font-size: 28rpx;
			&-right {
				margin-left: 30rpx;
			}
			&-right-row {
				margin-left: 15rpx;
			}
			&-left {
				margin-right: 30rpx;
			}
			&-left-row {
				margin-right: 15rpx;
			}
		}
	}
</style>